<template>
<div class="swipe">
    <var-swipe ref="swipe" class="swipe" :loop="false">
        <var-swipe-item>
            <img class="swipe-item" src="https://varlet.gitee.io/varlet-ui/cat.jpg">
        </var-swipe-item>
        <var-swipe-item>
            <img class="swipe-item" src="https://varlet.gitee.io/varlet-ui/cat2.jpg">
        </var-swipe-item>
        <var-swipe-item>
            <img class="swipe-item" src="https://varlet.gitee.io/varlet-ui/cat3.jpg">
        </var-swipe-item>
    </var-swipe>

    <var-button type="primary" @click="prev">prev</var-button>
    <var-button type="primary" @click="next">next</var-button>

</div>
</template>

<script>
import api from '@/api/news.js'
//import LHeader from '@/components/layout/LHeader.vue'

export default {
    name: 'swipe',
    components: {},
    data() {
        return {
            list: [],
            pageSize: 30
        }
    },
    methods: {
        prev() {
            this.$refs.swipe.prev()
        },
        next() {
            this.$refs.swipe.next()
        }
    },
    mounted() {
        let that = this
        //在项目中 window.onresize只能挂载一次（即只有一个有效）
        window.onresize = () => {
            return (() => {
                that.$refs.swipe.resize()
            })();
        }
    }
};
</script>

<style lang="scss">
.swipe {
    .swipe {
        height: 160px;
    }

    .swipe-item {
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
    }

    .var-button {
        margin: 10px;
    }
}
</style>
